<template>
  <div>
    <div>
      名称： <Input v-model="searchData.webUserName" placeholder="Enter something..." style="width: 300px" />
      <Button type="primary" icon="ios-search" @click="search">Search</Button>

    </div>
    <Table border :columns="columns7" :data="data6" />
    <Page :total="total" :close-on-click-modal="false" show-total show-elevator :page-size="searchData.pageSize" :current="searchData.pageCurrent" prev-text="上一页" next-text="下一页" @on-change="add()" />

    <el-dialog  :close-on-click-modal="false" :title="textMap[dialogStatus] == 'naswer' ? '回复' : '回复'" :visible.sync="dialogFormVisible">
      <Form ref="postForm" :model="postForm" :label-width="80" :rules="rules">
        <FormItem label="内容" prop="content">
          <Input v-model="postForm.content" type="textarea" :rows="4" placeholder="Enter something..." />
        </FormItem>
          <FormItem>
          <Button type="primary" @click="submitForm">提交</Button>
          <Button style="margin-left: 8px" @click="dialogFormVisible = false">退出</Button>
        </FormItem>
      </Form>
    </el-dialog>
    <el-dialog  :close-on-click-modal="false" :title="'查看回复'" :visible.sync="dialogFormVisible2">
      <List>
        <ListItem v-for="obj in answerList">
          <ListItemMeta avatar="https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar" title="博主" describedby="" />{{ obj.content }}
          <template slot="action">
            <li>
              <a @click="delAnswer(obj.id, obj.leaveWoedId)">删除</a>
            </li>
          </template>
        </ListItem>
      </List>
    </el-dialog>
  </div>
</template>
<script>
import { getDate, setSuggest } from '@/utils/dateUtile'
import { getPageLeaveWord, delLeaveWord, saveAnswer, updateStatus, loadAnswerList, delById } from '@/api/laveWoed_request'
export default {
  data() {
    return {
      answerList: [],
      temp: {
        id: undefined,
        text: '',
        webUserName: '',
        status: ''
      },
      postForm: {
        leaveWoedId: undefined,
        content: ''
      },
      total: 1,
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogStatus: '',
      rules: {
        content: [{ required: true, message: '必填', trigger: 'change' }]
      },
      textMap: {
        create: 'update'
      },
      searchData: {
        webUserName: '',
        pageSize: 10,
        pageCurrent: 1
      },
      pageSizeOpts: [10, 20],
      buttonSize: 'large',
      columns7: [
        {
          title: '标题',
          key: 'text',
          render: (h, params) => {
            return h('div', [
              h('Icon', {
                props: {
                  type: 'person'
                }
              }),
              h('strong', params.row.text)
            ])
          }
        },
        {
          title: '用户名',
          key: 'webUserName'
        },
        {
          title: '创建时间',
          key: 'startTime',
          render: (h, params) => {
            return h('div', {}, getDate(params.row.startTime))
          }
        },
        {
          title: '状态',
          key: 'status',
          render: (h, params) => {
            if (params.row.status === '1') {
              return h('div', {}, '已处理')
            } else if (params.row.status === '2') {
              return h('div', {}, '未处理')
            }
            return ''
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 400,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    console.log(params)
                    this.show(params.index)
                  }
                }
              }, '查看'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.delete(params.row.id)
                  }
                }
              }, '删除'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.answerMethod(params.row.id)
                  }
                }
              }, '回复'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.selectAnswer(params.row.id)
                  }
                }
              }, '查看回复'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.updateWebMessageStatus(params.row.status, params.row.id)
                  }
                }
              }, '修改状态')
            ])
          }
        }
      ],
      data6: [

      ]
    }
  },
  created() {
    this.data6 = []
    this.createPage()
  },
  methods: {
    createPage: function() {
      getPageLeaveWord(this.searchData).then(response => {
        var dataObj = response.data
        this.total = dataObj.pageShowTotal
        this.searchData.pageSize = dataObj.pageSize
        this.searchData.pageCurrent = dataObj.pageCurrent + 1
        this.data6 = []
        for (let i = 0; dataObj.pageList.length > i; i++) {
          this.data6.push(dataObj.pageList[i])
        }
      })
    },
    delAnswer(id, leaveWoedId) {
      delById(id).then(response => {
        this.$Message.success('成功')
        this.selectAnswer(leaveWoedId)
      }).catch(error => {
        console.log(error)
        this.$Message.success('失败')
      })
    },
    selectAnswer(id) {
      loadAnswerList(id).then(response => {
        this.answerList = response.data
        this.dialogFormVisible2 = true
      }).catch(error => {
        console.log(error)
      })
    },
    show(index) {
      this.$Modal.info({
        title: '查看',
        content: `标题：${this.data6[index].title}<br>列表路径：${this.data6[index].message}<br>`
      })
    },
    delete(index) {
      this.$Modal.confirm({
        title: '提示',
        content: '是否确定删除',
        onOk: () => {
          delLeaveWord(index).then(response => {
            setSuggest(this.$Modal, '提示信息', '删除成功')
            this.select()
          }).catch(err => {
            console.log(err)
            setSuggest(this.$Modal, '提示信息', '删除失败')
          })
        },
        onCancel: () => {
          this.$Message.info('已取消')
        }
      })
    },
    submitForm() {
      saveAnswer(this.postForm).then(response => {
        this.dialogFormVisible = false
        this.createPage()
        this.$Message.success('成功')
      }).catch(error => {
        console.log(error)
        this.$Message.error('失败')
      })
    },
    select() {
      this.createPage()
    },
    updateWebMessageStatus(status, id) {
      if (status === '1') {
        status = '2'
      } else if (status === '2') {
        status = '1'
      }
      updateStatus(id, status).then(response => {
        setSuggest(this.$Modal, '提示信息', '成功')
        this.createPage()
      }).catch(error => {
        console.log(error)
        setSuggest(this.$Modal, '提示信息', '失败')
      })
    },
    search() {
      this.select()
    },
    answerMethod(id) {
      this.temp = {}
      // console.log(this.temp)
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.postForm.leaveWoedId = id
    }
  }
}
</script>
